/* Copyright (C) 2021 changwei@iscas.ac.cn
* 
* Apache License Version 2.0许可头：
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* 
*    http://www.apache.org/licenses/LICENSE-2.0
* 
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
<template>
  <el-table
    v-bind:data="dataSource"
    :header-cell-style="rowStyle"
    style="width: 100%"
    :cell-style="{ textAlign: 'center' }"
  >
    <el-table-column prop="ha1" label="" width="150">
      <el-table-column prop="ha2" label="特性/主题" width="120">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank">{{ scope.row.ha2 }}</a>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hc1" label="开发环境准备" width="150">
      <el-table-column
        prop="hc2"
        label="IDE、SDK"
        width="60"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hc2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hc3"
        width="100"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hc3 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column prop="hd1" label="UI" width="150">
      <el-table-column
        prop="hd2"
        label="JS UI"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.hd2 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hd3"
        label="多模输入"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
    </el-table-column>

    <el-table-column prop="he1" label="媒体" width="150">
      <el-table-column
        prop="he2"
        label="视频"
        width="50"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.he1 == 1">
            <el-tag disable-transitions type="success">✓</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="he3"
        label="图像"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="he4"
        label="相机"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="he5"
        label="音频"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="he6"
        label="媒体会话管理"
        width="70"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="he7"
        label="媒体数据管理"
        width="70"
        :render-header="renderHeader"
      ></el-table-column>
    </el-table-column>

    <el-table-column prop="hf1" label="网络与连接" width="150">
      <el-table-column
        prop="hf2"
        label="NFC"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="hf3"
        label="蓝牙"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="hf4"
        label="WLAN"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="hf5"
        label="网络管理"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="hf6"
        label="电话服务"
        width="50"
        :render-header="renderHeader"
      ></el-table-column>
      <el-table-column
        prop="hf7"
        label="IPC与RPC通信"
        width="70"
        :render-header="renderHeader"
      ></el-table-column>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    dataSource: "List",
  },
  methods: {
    renderHeader(h, { column, $index }) {
      if ($index === 1) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/应用开发/OpenHarmony/开发环境准备/IDE、SDK.md"
            target="_blanc"
          >
            IDE、SDK
          </a>
        );
      } else if ($index === 2) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87/%E7%BC%96%E8%AF%91%E3%80%81%E7%AD%BE%E5%90%8D%E3%80%81%E5%AE%89%E8%A3%85%E3%80%81%E8%BF%90%E8%A1%8C.md"
            target="_blanc"
          >
            编译、签名、安装、运行（模拟器、真机）
          </a>
        );
      } else if ($index === 3) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/UI/JS_UI.md"
            target="_blanc"
          >
            JS UI
          </a>
        );
      } else if ($index === 4) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/UI/%E5%A4%9A%E6%A8%A1%E8%BE%93%E5%85%A5.md"
            target="_blanc"
          >
            多模输入
          </a>
        );
      } else if ($index === 5) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AA%92%E4%BD%93/%E8%A7%86%E9%A2%91.md"
            target="_blanc"
          >
            视频
          </a>
        );
      } else if ($index === 6) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AA%92%E4%BD%93/%E5%9B%BE%E5%83%8F.md"
            target="_blanc"
          >
            图像
          </a>
        );
      } else if ($index === 7) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AA%92%E4%BD%93/%E7%9B%B8%E6%9C%BA.md"
            target="_blanc"
          >
            相机
          </a>
        );
      } else if ($index === 8) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AA%92%E4%BD%93/%E9%9F%B3%E9%A2%91.md"
            target="_blanc"
          >
            音频
          </a>
        );
      } else if ($index === 9) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AA%92%E4%BD%93/%E5%AA%92%E4%BD%93%E4%BC%9A%E8%AF%9D%E7%AE%A1%E7%90%86.md"
            target="_blanc"
          >
            媒体会话管理
          </a>
        );
      } else if ($index === 10) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E5%AA%92%E4%BD%93/%E5%AA%92%E4%BD%93%E6%95%B0%E6%8D%AE%E7%AE%A1%E7%90%86.md"
            target="_blanc"
          >
            媒体数据管理
          </a>
        );
      } else if ($index === 11) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BD%91%E7%BB%9C%E4%B8%8E%E8%BF%9E%E6%8E%A5/NFC.md"
            target="_blanc"
          >
            NFC
          </a>
        );
      } else if ($index === 12) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BD%91%E7%BB%9C%E4%B8%8E%E8%BF%9E%E6%8E%A5/%E8%93%9D%E7%89%99.md"
            target="_blanc"
          >
            蓝牙
          </a>
        );
      } else if ($index === 13) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BD%91%E7%BB%9C%E4%B8%8E%E8%BF%9E%E6%8E%A5/WLAN.md"
            target="_blanc"
          >
            WLAN
          </a>
        );
      } else if ($index === 14) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BD%91%E7%BB%9C%E4%B8%8E%E8%BF%9E%E6%8E%A5/%E7%BD%91%E7%BB%9C%E7%AE%A1%E7%90%86.md"
            target="_blanc"
          >
            网络管理
          </a>
        );
      } else if ($index === 15) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BD%91%E7%BB%9C%E4%B8%8E%E8%BF%9E%E6%8E%A5/%E7%94%B5%E8%AF%9D%E6%9C%8D%E5%8A%A1.md"
            target="_blanc"
          >
            电话服务
          </a>
        );
      } else if ($index === 16) {
        return (
          <a
            href="https://gitee.com/openharmony-sig/knowledge/blob/master/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/OpenHarmony/%E7%BD%91%E7%BB%9C%E4%B8%8E%E8%BF%9E%E6%8E%A5/IPC%E4%B8%8ERPC%E9%80%9A%E4%BF%A1.md"
            target="_blanc"
          >
            IPC与RPC通信
          </a>
        );
      }
    },
    rowStyle({ row, column, rowIndex, columnIndex }) {
      if (
        (columnIndex === 1 && rowIndex >= 0) ||
        (columnIndex === 2 && rowIndex >= 0) ||
        (columnIndex === 3 && rowIndex === 1)
      ) {
        return "background-color:#98FB98;text-align:center;";
      } else if (
        (columnIndex === 3 && rowIndex >= 0) ||
        (rowIndex == 1 && columnIndex >= 4 && columnIndex <= 10)
      ) {
        return "background-color:#FFFF00;text-align:center;";
      } else if (columnIndex > 10 || (rowIndex == 0 && columnIndex == 4)) {
        return "background-color:#87CEFA;text-align:center;";
      }
    },
  },
};
</script>
<style>
.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
</style>
